<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .p-box .libox:nth-child(2){

      }
      .item{
          width: 200px;
          height: 100px;border: 1px solid blue;
          margin-bottom: 20px;
      }
      .item .left{
          float: left;
      }
      .item .right{
          float: right;
      }
      .item .add{
          width: 25px;
          height: 25px;
          text-align: center;
          line-height: 25px;
          border: 1px solid red;
      }
      .item .jian{
          width: 25px;
          height: 25px;
          text-align: center;
          line-height: 25px;
          border: 1px solid #ccc;
      }
      .active .name{
          color: green;
      }
    </style>
</head>
<body>
    <div id="box" class="dd">
         1013212313
    </div>
    <div id="tbox"><p>123</p>4</div>
    <button id="btn">点击</button>
    <img id="imgbox" src="https://gw.alicdn.com/bao/upload/TB12jCUloH1gK0jSZSyXXXtlpXa.jpg_Q75.jpg" alt="" data-id="2" style="display: block;">
    <input type="text" id="ipt" value="123123" placeholder="请输入内容" disabled>
    <input type="checkbox"  checked>
    <div class="pbox">
        <div class="libox"></div>
        <div class="li-box"></div>
        <div class="libox"><div><div><div class="dd"></div></div></div></div>
    </div>
    <div class="list">
        <div class="item active">
            <div class="left">
                <input type="checkbox" checked>
                <div class="name">手机</div>
            </div>
            <div class="right">
                <div class="jian">-</div>
                <div class="num">1</div>
                <div class="add">+</div>
            </div>
        </div>
        <div class="item">
            <div class="left">
                <input type="checkbox">
                <div class="name">电脑</div>
            </div>
            <div class="right">
                <div class="jian">-</div>
                <div class="num">1</div>
                <div class="add">+</div>
            </div>
        </div>
        <div class="item">
            <div class="left">
                <input type="checkbox">
                <div class="name">农产品</div>
            </div>
            <div class="right">
                <div class="jian">-</div>
                <div class="num">1</div>
                <div class="add">+</div>
            </div>
        </div>
    </div>
    <div class="tablist">
        <div class="iem">新闻</div>
        <div class="iem">体育</div>
        <div class="iem">军事</div>
    </div>
    <div class="mainlist">
        <div class="mainitem">
            新闻内容
        </div>
        <div class="mainitem" style="display: none;">
            体育内容
        </div>
        <div class="mainitem" style="display: none;">
            军事内容
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $('.iem').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            $('.mainitem').eq($(this).index()).fadeIn().siblings().fadeOut()
        })
        console.log($('#imgbox').attr('id'))
        $('#imgbox').attr('src','https://gw.alicdn.com/bao/upload/TB1gMfTgeL2gK0jSZPhXXahvXXa.jpg_Q75.jpg');
        console.log($('#imgbox').attr('data-id',3))
        var imgBox = $('#imgbox');
        $('#btn').click(function(){
            imgBox.fadeOut('slow');
        })
        console.log($('.pbox').find('.libox'))
        // 
        $('.add').click(function(){
            var num = $(this).prev().html();
            num++;
            $(this).prev().html(num)
        })
        $('.jian').click(function(){
            var num = $(this).next().html();
            num--;
            if(num < 1){
                return false
            }
            $(this).next().html(num);
        })
        $('.item').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            //$(this).find('input').prop('checked',true).siblings().removeProp('checked')
            $(this).prop('checked',false);   //
        })
    </script> 
</body>
</html>